import { useState } from 'react'
import { PlusIcon, ClipboardDocumentListIcon, CheckCircleIcon, ClockIcon } from '@heroicons/react/24/outline'
import { CheckCircleIcon as CheckCircleIconSolid } from '@heroicons/react/24/solid'

interface Task {
  id: string
  title: string
  completed: boolean
  assignedTo?: string
  dueDate?: Date
}

interface Plan {
  id: string
  title: string
  description: string
  category: 'travel' | 'date' | 'life' | 'work' | 'other'
  status: 'planning' | 'in-progress' | 'completed'
  createdAt: Date
  dueDate?: Date
  tasks: Task[]
  createdBy: string
}

const PlansPage = () => {
  const [plans] = useState<Plan[]>([
    {
      id: '1',
      title: '周末旅行计划',
      description: '去海边度过一个浪漫的周末',
      category: 'travel',
      status: 'planning',
      createdAt: new Date('2024-01-15'),
      dueDate: new Date('2024-01-20'),
      createdBy: '我',
      tasks: [
        { id: '1-1', title: '预订酒店', completed: true, assignedTo: '我' },
        { id: '1-2', title: '规划路线', completed: false, assignedTo: 'TA' },
        { id: '1-3', title: '准备行李', completed: false },
      ],
    },
    {
      id: '2',
      title: '学习新技能',
      description: '一起学习烹饪，提升厨艺',
      category: 'life',
      status: 'in-progress',
      createdAt: new Date('2024-01-10'),
      createdBy: 'TA',
      tasks: [
        { id: '2-1', title: '买菜谱书', completed: true, assignedTo: 'TA' },
        { id: '2-2', title: '练习基础刀工', completed: true, assignedTo: '我' },
        { id: '2-3', title: '学做第一道菜', completed: false, assignedTo: '我们' },
      ],
    },
    {
      id: '3',
      title: '装修新家',
      description: '打造我们的温馨小窝',
      category: 'life',
      status: 'completed',
      createdAt: new Date('2024-01-01'),
      createdBy: '我',
      tasks: [
        { id: '3-1', title: '选择装修风格', completed: true, assignedTo: '我们' },
        { id: '3-2', title: '购买家具', completed: true, assignedTo: '我' },
        { id: '3-3', title: '布置房间', completed: true, assignedTo: 'TA' },
      ],
    },
  ])
  
  const [selectedPlan, setSelectedPlan] = useState<Plan | null>(null)
  const [filter, setFilter] = useState<'all' | 'planning' | 'in-progress' | 'completed'>('all')

  const filteredPlans = plans.filter(plan => {
    if (filter === 'all') return true
    return plan.status === filter
  })

  const getCategoryColor = (category: Plan['category']) => {
    const colors = {
      travel: 'bg-blue-100 text-blue-700',
      date: 'bg-pink-100 text-pink-700',
      life: 'bg-green-100 text-green-700',
      work: 'bg-purple-100 text-purple-700',
      other: 'bg-gray-100 text-gray-700',
    }
    return colors[category]
  }

  const getCategoryName = (category: Plan['category']) => {
    const names = {
      travel: '旅行',
      date: '约会',
      life: '生活',
      work: '工作',
      other: '其他',
    }
    return names[category]
  }

  const getStatusColor = (status: Plan['status']) => {
    const colors = {
      planning: 'bg-yellow-100 text-yellow-700',
      'in-progress': 'bg-blue-100 text-blue-700',
      completed: 'bg-green-100 text-green-700',
    }
    return colors[status]
  }

  const getStatusName = (status: Plan['status']) => {
    const names = {
      planning: '计划中',
      'in-progress': '进行中',
      completed: '已完成',
    }
    return names[status]
  }

  const formatDate = (date: Date) => {
    return date.toLocaleDateString('zh-CN', {
      month: 'short',
      day: 'numeric',
    })
  }

  const getCompletionRate = (tasks: Task[]) => {
    if (tasks.length === 0) return 0
    const completedTasks = tasks.filter(task => task.completed).length
    return Math.round((completedTasks / tasks.length) * 100)
  }

  return (
    <div className="space-y-6">
      {/* 页面头部 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">协作计划</h1>
          <p className="text-gray-600 mt-1">
            一起规划，共同实现 🎯
          </p>
        </div>
        <button className="btn-primary flex items-center gap-2">
          <PlusIcon className="h-5 w-5" />
          新建计划
        </button>
      </div>

      {/* 统计信息 */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div className="card p-6">
          <div className="flex items-center">
            <div className="p-3 rounded-lg bg-blue-50">
              <ClipboardDocumentListIcon className="h-6 w-6 text-blue-600" />
            </div>
            <div className="ml-4">
              <p className="text-sm font-medium text-gray-600">总计划数</p>
              <p className="text-2xl font-bold text-gray-900">{plans.length}</p>
            </div>
          </div>
        </div>
        
        <div className="card p-6">
          <div className="flex items-center">
            <div className="p-3 rounded-lg bg-yellow-50">
              <ClockIcon className="h-6 w-6 text-yellow-600" />
            </div>
            <div className="ml-4">
              <p className="text-sm font-medium text-gray-600">计划中</p>
              <p className="text-2xl font-bold text-gray-900">
                {plans.filter(p => p.status === 'planning').length}
              </p>
            </div>
          </div>
        </div>
        
        <div className="card p-6">
          <div className="flex items-center">
            <div className="p-3 rounded-lg bg-blue-50">
              <ClockIcon className="h-6 w-6 text-blue-600" />
            </div>
            <div className="ml-4">
              <p className="text-sm font-medium text-gray-600">进行中</p>
              <p className="text-2xl font-bold text-gray-900">
                {plans.filter(p => p.status === 'in-progress').length}
              </p>
            </div>
          </div>
        </div>
        
        <div className="card p-6">
          <div className="flex items-center">
            <div className="p-3 rounded-lg bg-green-50">
              <CheckCircleIcon className="h-6 w-6 text-green-600" />
            </div>
            <div className="ml-4">
              <p className="text-sm font-medium text-gray-600">已完成</p>
              <p className="text-2xl font-bold text-gray-900">
                {plans.filter(p => p.status === 'completed').length}
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* 筛选器 */}
      <div className="flex space-x-4">
        {[
          { key: 'all', label: '全部计划' },
          { key: 'planning', label: '计划中' },
          { key: 'in-progress', label: '进行中' },
          { key: 'completed', label: '已完成' },
        ].map((item) => (
          <button
            key={item.key}
            onClick={() => setFilter(item.key as any)}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
              filter === item.key
                ? 'bg-primary-100 text-primary-700'
                : 'text-gray-600 hover:text-gray-900'
            }`}
          >
            {item.label}
          </button>
        ))}
      </div>

      {/* 计划列表 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {filteredPlans.map((plan) => (
          <div
            key={plan.id}
            className="card p-6 cursor-pointer hover:shadow-lg transition-shadow"
            onClick={() => setSelectedPlan(plan)}
          >
            <div className="flex items-start justify-between mb-4">
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-2">
                  <span className={`px-2 py-1 rounded-full text-xs font-medium ${getCategoryColor(plan.category)}`}>
                    {getCategoryName(plan.category)}
                  </span>
                  <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(plan.status)}`}>
                    {getStatusName(plan.status)}
                  </span>
                </div>
                <h3 className="text-lg font-semibold text-gray-900 mb-1">
                  {plan.title}
                </h3>
                <p className="text-gray-600 text-sm line-clamp-2">
                  {plan.description}
                </p>
              </div>
            </div>
            
            {/* 进度条 */}
            <div className="mb-4">
              <div className="flex items-center justify-between text-sm text-gray-600 mb-1">
                <span>完成进度</span>
                <span>{getCompletionRate(plan.tasks)}%</span>
              </div>
              <div className="w-full bg-gray-200 rounded-full h-2">
                <div
                  className="bg-primary-500 h-2 rounded-full transition-all"
                  style={{ width: `${getCompletionRate(plan.tasks)}%` }}
                ></div>
              </div>
            </div>
            
            {/* 任务预览 */}
            <div className="space-y-2 mb-4">
              {plan.tasks.slice(0, 3).map((task) => (
                <div key={task.id} className="flex items-center gap-2 text-sm">
                  {task.completed ? (
                    <CheckCircleIconSolid className="h-4 w-4 text-green-500" />
                  ) : (
                    <div className="h-4 w-4 border-2 border-gray-300 rounded-full" />
                  )}
                  <span className={task.completed ? 'line-through text-gray-500' : 'text-gray-700'}>
                    {task.title}
                  </span>
                  {task.assignedTo && (
                    <span className="text-xs text-gray-500">({task.assignedTo})</span>
                  )}
                </div>
              ))}
              {plan.tasks.length > 3 && (
                <p className="text-xs text-gray-500">
                  还有 {plan.tasks.length - 3} 个任务...
                </p>
              )}
            </div>
            
            {/* 底部信息 */}
            <div className="flex items-center justify-between text-xs text-gray-500">
              <span>创建于 {formatDate(plan.createdAt)}</span>
              {plan.dueDate && (
                <span>截止 {formatDate(plan.dueDate)}</span>
              )}
            </div>
          </div>
        ))}
      </div>

      {/* 空状态 */}
      {filteredPlans.length === 0 && (
        <div className="text-center py-12">
          <ClipboardDocumentListIcon className="h-12 w-12 text-gray-400 mx-auto mb-4" />
          <h3 className="text-lg font-medium text-gray-900 mb-2">
            还没有计划
          </h3>
          <p className="text-gray-600 mb-6">
            创建你们的第一个协作计划吧
          </p>
          <button className="btn-primary">
            新建计划
          </button>
        </div>
      )}

      {/* 计划详情模态框 */}
      {selectedPlan && (
        <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg max-w-2xl w-full max-h-full overflow-auto">
            <div className="p-6">
              <div className="flex items-center justify-between mb-6">
                <div>
                  <div className="flex items-center gap-2 mb-2">
                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${getCategoryColor(selectedPlan.category)}`}>
                      {getCategoryName(selectedPlan.category)}
                    </span>
                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(selectedPlan.status)}`}>
                      {getStatusName(selectedPlan.status)}
                    </span>
                  </div>
                  <h2 className="text-xl font-bold text-gray-900">
                    {selectedPlan.title}
                  </h2>
                </div>
                <button
                  onClick={() => setSelectedPlan(null)}
                  className="text-gray-400 hover:text-gray-600"
                >
                  ✕
                </button>
              </div>
              
              <div className="space-y-6">
                <div>
                  <h3 className="text-sm font-medium text-gray-900 mb-2">描述</h3>
                  <p className="text-gray-700">{selectedPlan.description}</p>
                </div>
                
                <div>
                  <h3 className="text-sm font-medium text-gray-900 mb-3">任务列表</h3>
                  <div className="space-y-3">
                    {selectedPlan.tasks.map((task) => (
                      <div key={task.id} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                        {task.completed ? (
                          <CheckCircleIconSolid className="h-5 w-5 text-green-500" />
                        ) : (
                          <div className="h-5 w-5 border-2 border-gray-300 rounded-full" />
                        )}
                        <div className="flex-1">
                          <p className={`text-sm ${task.completed ? 'line-through text-gray-500' : 'text-gray-900'}`}>
                            {task.title}
                          </p>
                          {task.assignedTo && (
                            <p className="text-xs text-gray-500 mt-1">
                              负责人: {task.assignedTo}
                            </p>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
                
                <div className="flex items-center justify-between text-sm text-gray-500">
                  <span>创建于 {selectedPlan.createdAt.toLocaleDateString('zh-CN')}</span>
                  <span>创建者: {selectedPlan.createdBy}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

export default PlansPage